import { View } from "@tarojs/components";

import ByCol from "@/components/ui/ByCol";
import ByRow from "@/components/ui/ByRow";
import ByTag from "@/components/ui/ByTag";
import ByText from "@/components/ui/ByText";
import Money from "@/components/app/Money";

import { DudchgDetailItem } from "../apply";

// 定额Item
export const DetailQuotaItem = ({ source }: { source: DudchgDetailItem }) => {
  const { quotaName, quotaNum, quotaUnit, quotaPrice } = source;

  /**
   * 1、定额用承包价 材料用成本价 计算总额
   * 2、校验成本总额「定额或材料成本」和承担人总额相等
   */

  return (
    <View className="relative border-1 rounded-lg p-3 mb-3">
      <ByRow content="between" align="center">
        <ByCol span={"none"} className="mr-1">
          <ByTag size="small" type="warning">
            定额
          </ByTag>
        </ByCol>
        <ByCol span={"auto"}>
          <ByText bold>{quotaName}</ByText>
        </ByCol>
        <ByText bold>
          <Money value={quotaPrice * quotaNum} />
        </ByText>
      </ByRow>

      <ByRow content="between" className="mt-2">
        <ByText size="sm" type="second">
          马可波罗瓷砖 400*800（片）
        </ByText>

        <ByText size="sm" type="second">
          ¥{quotaPrice}/{quotaUnit}
        </ByText>

        <ByText size="sm" type="second">
          数量：{quotaNum}
        </ByText>
      </ByRow>
    </View>
  );
};

// 材料Item
export const DetailMaterialItem = ({
  source,
}: {
  source: DudchgDetailItem;
}) => {
  const {
    materialName,
    materialNum = 0,
    materialSalePrice = 0,
    materialUnit,
    materialSpec,
  } = source;

  /**
   * 1、定额用承包价 材料用成本价 计算总额
   * 2、校验成本总额「定额或材料成本」和承担人总额相等
   */

  return (
    <View className="relative border-1 rounded-lg p-3 mb-3 border-line-light">
      <ByRow content="between" align="center">
        <ByCol span={"none"} className="mr-1">
          <ByTag size="small">材料</ByTag>
        </ByCol>
        <ByCol span={"auto"}>
          <ByText bold>{materialName}</ByText>
        </ByCol>
        <ByText bold>
          <Money value={materialSalePrice * materialNum} />
        </ByText>
      </ByRow>

      <ByRow content="between" className="mt-2">
        <ByText size="sm" type="second">
          {materialSpec}
        </ByText>

        <ByText size="sm" type="second">
          ¥{materialSalePrice}/{materialUnit}
        </ByText>

        <ByText size="sm" type="second">
          数量：{materialNum}
        </ByText>
      </ByRow>
    </View>
  );
};
